<template>
	<view>
		<u-popup :show="show" mode="bottom" :customStyle="popupStyle" @close="show = false">
			<view>
				<u-tabs :list="typeList" :current="current" :activeStyle="tabsActiveStyle" :inactiveStyle="tabsStyle"
					lineWidth="0" lineHeight="0" @click="tabschange">

				</u-tabs>
			</view>
			<view class="u-flex u-flex-between popupContent">
				<!-- 左侧买家区块 -->
				<view class="item" @click="gopage(0)">
					<u--image :showLoading="true" :src="seller" width="80rpx" height="80rpx"
						mode="aspectFill"></u--image>
					<view class="text">我是买家</view>
				</view>
				<!-- 右侧卖家区块 -->
				<view class="item" @click="gopage(1)">
					<u--image :showLoading="true" :src="buyer" width="80rpx" height="80rpx"
						mode="aspectFill"></u--image>
					<view class="text">我是卖家</view>
				</view>
			</view>
		</u-popup>

		<yukefu></yukefu>
		<u-tabbar :value="value" @change="change" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
			activeColor="#39C03E">
			<template v-for="(item, index) in list">
				<u-tabbar-item v-if="item.text== '免费发布'" :text="item.text" :icon="item.icon" :customStyle="plusStyle">
					<template #inactive-icon>
						<view class="releaseBg u-flex-xy-center">
							<view class="releaseicon u-flex-xy-center">
								<u-icon name="plus" color="#fff" size="20"></u-icon>
							</view>
						</view>
					</template>
				</u-tabbar-item>
				<u-tabbar-item v-else :text="item.text" :icon="item.icon" :activeIcon="item.activeIcon || false">
				</u-tabbar-item>
			</template>
		</u-tabbar>
	</view>
</template>

<script>
	import seller from "@/static/tabbar/seller.png";
	import buyer from "@/static/tabbar/buyer.png";
	import zx from "@/static/tabbar/zx.png"
	import zxactive from "@/static/tabbar/zxactive.png"
	import {
		getAccessToken,
	} from "@/utils/auth";
	import {
		getProductClassBuyerAndSeller,
	} from "@/api/index.js";
	export default {
		name: "tabbar",
		data() {
			return {
				seller,
				buyer,

				// 发布show
				show: false,
				value: 0,
				plusStyle: {
					position: "relative",
					top: "-30rpx",
				},
				popupStyle: {
					// bottom:'100rpx'
				},
				releasedata: {

				},
				levelTypeshow: false,
				typeList: [],
				current: 0,
				tabsStyle: {
					color: "#333",
				},
				tabsActiveStyle: {
					color: "#39C03E",
					fontWeight: "bold",
				},
			};
		},
		computed: {
			list() {
				let v = this.value;
				let r = [{
						text: "首页",
						page: "/pages/index/index",
						icon: "home",
						activeIcon: "home-fill",
					},
					{
						text: "行情资讯",
						page: "/pages/information/information",
						icon: zx,
						activeIcon: zxactive,
					},
					{
						text: "免费发布",
						page: "/pages/release/transactionalMode",
						icon: false,
						// "plus-circle"
					},
					{
						text: "农急帮手",
						page: "/pages/video/video",
						icon: "grid",
						activeIcon: "grid-fill",
					},
					{
						text: "我的",
						page: "/pages/my/my",
						icon: "account",
						activeIcon: "account-fill",
					},
				];
				return r;
			},
		},

		module() {},
		mounted() {
			this.init();
		},
		// ready
		methods: {
			// async transactionalModeTap(transactionalModeTap) {
			// 	this.releasedata.transactionalModeTap = transactionalModeTap;
			// 	let classlist = await getProductClassBuyerAndSeller({ classType: 1 });
			// 	console.log(classlist);
			// 	this.show = false
			// 	this.typeList = classlist.data;
			// 	this.levelTypeshow = true;
			// },
			gopage(type) {
				this.show = false
				if (!getAccessToken()) {
					uni.navigateTo({
						url: "/pages/login/login",
					});
					return;
				}
				uni.navigateTo({
					url: `/pages/release/release?transactionalMode=${type}&level1Type=${this.typeList[this.current].id}`,
				});
			},
			init() {
				let pages = getCurrentPages();
				let fullPath = pages[pages.length - 1].$page.fullPath;
				let i = this.list.findIndex((e) => {
					return fullPath.includes(e.page);
				});
				this.value = Number(i);
			},
			tabschange({
				index
			}) {
				this.current = index
			},
			async change(index) {
				// this.value = index
				// console.log(index);
				let dqitem = this.list[index];
				// uni.reLaunch({
				// 	url: dqitem.page,
				// });
				if (dqitem.text == "免费发布") {


					let classlist = await getProductClassBuyerAndSeller({
						classType: 1
					});
					this.typeList = classlist.data.map((e) => {
						return {
							...e,
							name: e.abbrName,
						};
					});
					this.show = true;
				} else {
					uni.reLaunch({
						url: dqitem.page,
					});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.releaseBg {
		width: 100rpx;
		height: 100rpx;
		background: #fff;
		// position: relative;
		// top: -24rpx;
		border-radius: 50%;

		.releaseicon {
			width: 70rpx;
			height: 70rpx;
			background: #39c03e;
			color: #fff;
			border-radius: 50%;
		}
	}

	/* 弹窗内容容器 */
	.popupContent {
		padding: 40rpx 40rpx;
		/* 内边距 */
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	/* 每个区块（买家/卖家） */
	.item {
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		align-items: center;
		/* 水平居中 */
		text-align: center;
		/* 文字居中 */
		width: 320rpx;
		background: #fef2f2;
		padding: 20rpx 0;
		border-radius: 10rpx;

		&:nth-child(2) {
			background: #f1f8ff;
		}
	}

	// .item {
	//   background-color: #f5f5f5; /* 浅灰色背景 */
	//   border-radius: 10rpx; /* 圆角 */
	//   padding: 20rpx; /* 内部填充 */
	// }
	/* 图片样式 */
	.u--image {
		border-radius: 50%;
		/* 圆形图片 */
		margin-bottom: 10rpx;
		/* 图片与文字间距 */
	}

	/* 文字样式 */
	.text {
		font-size: 28rpx;
		color: #333333;
		margin-top: 10rpx;
		/* 文字与图片间距 */
	}

	.typeContainer {
		flex-wrap: wrap;
		background: #fff;
		// margin: 20rpx;
		padding: 16rpx 0;
		justify-content: flex-start;

		.typeItem {
			width: 25%;
			height: 150rpx;
			flex-direction: column;

			.typefullName {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #606266;
			}
		}
	}
</style>